<template>
  <div class="Footer">
    <div class="container">
      <div class="address">
        <img src="@/assets/images/home/logo.png" alt="" />
        <p>南京市玄武区玄武湖</p>
        <p><b>电话:</b>400-888-8888</p>
        <p><b>Email:</b>2023403760@qq.com</p>
      </div>
      <div class="link">
        <span>快捷链接</span>
        <ul>
          <li>
            <router-link to="#"><span></span>公司简介</router-link>
          </li>
          <li>
            <router-link to="#"><span></span>新闻中心</router-link>
          </li>
          <li>
            <router-link to="#"><span></span>产品中心</router-link>
          </li>
          <li>
            <router-link to="#"><span></span>服务案例</router-link>
          </li>
          <li>
            <router-link to="#"><span></span>招贤纳士</router-link>
          </li>
          <li>
            <router-link to="#"><span></span>联系我们</router-link>
          </li>
        </ul>
      </div>
      <div class="message">
        <span class="title">免费通话</span>
        <p>请输入您的联系电话，座机请加区号(以'-'隔开)</p>
        <input type="text" placeholder="请输入您的联系电话" />
        <div class="bottom">免费通话</div>
      </div>
      <div class="us">
        <img
          src="@/assets/images/home/WeChat.jpg"
          alt=""
        />
        <span><i class="iconfont icon-weixin"></i> 微信扫一扫</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myFooter",
};
</script>

<style lang="less" scoped>
.Footer {
  background-color: #f8ede6;
  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    padding: 60px 0 80px 0;
    .address {
      flex-basis: 24%;
      img {
        width: 120px;
        margin-bottom: 14px;
      }
      p {
        font-size: 16px;
        color: #666;
        padding: 14px 0;
      }
    }
    .link {
      flex-basis: 20%;
      span {
        color: #8e5f37;
        font-size: 16px;
        font-weight: bold;
      }
      ul {
        padding-top: 20px;
        li {
          padding: 4px 0;
          a {
            color: #666;
            text-decoration: none;
            line-height: 20px;
            span {
              display: inline-block;
              height: 3px;
              width: 0px;

              background-color: #8e5f37;
              vertical-align: 3px;
              // margin-right: 10px;
              transition: all 0.4s;
            }
            &:hover span {
              width: 20px;
              margin-right: 6px;
            }
          }
        }
      }
    }
    .message {
      flex-basis: 30%;
      span.title {
        color: #8e5f37;
        font-size: 16px;
        font-weight: bold;
      }
      p {
        font-size: 16px;
        color: #666;
        padding: 20px 0;
      }
      input {
        width: 100%;
        height: 40px;
        outline: none;
        border: 1px solid #ccc;
        padding-left: 10px;
        color: #666;
      }
      input::placeholder {
        color: #999;
      }
      .bottom {
        cursor: pointer;
        box-sizing: border-box;
        color: #fff;
        width: 90px;
        margin-top: 10px;
        padding: 12px 0px;
        text-align: center;
        font-size: 14px;
        background-color: #000000;
        &:hover {
          background-color: rgba(0, 0, 0, 0.7);
        }
      }
    }
    .us {
      flex-basis: 24%;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        display: block;
        width: 140px;
        height: 140px;
        margin-bottom: 20px;
      }
      span {
        display: inline-block;
        width: 140px;
        text-align: center;
        color: #8e5f37;
        // font-weight: bold;
        font-size: 16px;
        i {
          font-weight: normal;
          font-size: 24px;
          vertical-align: -4px;
        }
      }
    }
  }
}
</style>